<template>  
  <div class="conditionWarp_seachDeveloperShort" :style="getStyle()" @click.stop="stopClick">
  	<div class="seach_input">
      <Input 
        v-model="seach_text" 
        placeholder = "请输入关键字" 
        @on-change = "handleSeach"
        @on-focus = "focusSeach"
        @on-blur = "blurSeach"
        ></Input>
  	</div>
  	<div class="seach_down" v-show="modal_down && list && list.length>0">
  		<ul v-if="list && list.length>0">
  			<li v-for="(item,index) in list" :key="index" @click="handleItemClick(item)">
  				<div class="seach_down_item" :title="item.name">
  					{{ item.name }}
  				</div>
  			</li>
  		</ul>
  	</div>
  </div>
</template>
<script>

import Helper from '@/common/helper'
import Rest from '@/rest'
import Api from '@/api'

export default {
  data () {
    return {
			seach_text: '',
      seach_textBackUp: '',
			seach_textBackUp2: '',
			resultObj: {},
			list: [],
			modal_down: false,
			timeOut:'',
    }
  },
  props: {
    width: { 
      type: String,
      default: ''
    },
  },
  methods:{
    init(){
      this.resetInit();
    },
    setValue(value) {
    	if(value){
	    	this.seach_text = value;
	      this.seach_textBackUp = this.seach_text;
	      this.seach_textBackUp2 = this.seach_text;
	    	this.getList()
      }
    },
    getStyle() {
    	var result = ''
    	if(this.width){
    		result = "width:"+this.width;
    	}
    	return result;
    },
    resetInit(){
      this.seach_text = '';
      this.seach_textBackUp = '';
      this.seach_textBackUp2 = '';
    },
    handleSeach() {
      if(this.seach_textBackUp != this.seach_text){
      	this.resultObj = {}
      	this.seach_textBackUp = this.seach_text;
    		this.getList();
      }
    },
    focusSeach() {
    	this.modal_down = true;
      this.seach_textBackUp2 = this.seach_text;
    },
    blurSeach() {
    	setTimeout(() => {
    		this.modal_down = false;
        if(this.seach_textBackUp2 != this.seach_text){
          this.$emit('handleChoose',{});
        }
    	}, 200);
    },
    handleItemClick(obj) {
    	this.seach_text = obj.name;
      this.seach_textBackUp = this.seach_text;
      this.seach_textBackUp2 = this.seach_text;
    	this.resultObj = obj;
    	setTimeout(() => {
    		this.getList();
    	}, 200);
      this.$emit('handleChoose',this.resultObj);
    },
    getList() {
    	clearTimeout(this.timeOut);
    	this.timeOut = setTimeout(()=> {
				this.list = [];
	      var restApi = Api.caseManage.params.case.developerName;
	      var parms = {
	      	"developerForShort": this.seach_text,
	      }
	      if(!parms.developerForShort){ 
	      	return;
	      	this.resultObj = {};
	      }
	      Rest.get(restApi,parms).done((res)=> {
	        if (Helper.isSuccess(res)) {
	          if (res.data.list && res.data.list.length) {
	            this.list = res.data.list;
	          }
	        } else {
	          this.$Message.error(res.status.msg);
	        }
	      });
    	}, 300);
    },
    warpClick() {},
    stopClick() {},
  },
  created() {
    this.init();
  },
  activated() {
    this.init();
  },
}
</script>

<style lang="scss">
	@import "../../assets/sass/install";
	.conditionWarp_seachDeveloperShort{
		display: inline-block;
    /*width: 281px;*/
    height: 32px;
    color: #657180;
    position: relative;
    .seach_input{
    	position: relative;
    }
    .seach_title-down,.seach_down{
      position: absolute;
      left: 0;
      top: 38px;
      @include transition(500ms);
      @include radius(3px);
      @include overflowCss();
      max-height: 100px;
      width: 100%;
      overflow: auto;
      overflow-x: hidden;
      padding: 5px 0px;
      background-color: #fff;
      box-shadow: 0 1px 6px rgba(0,0,0,.2);
      z-index: 900;
      text-align: left;
      &>ul{
      	font-size: 0;
      	&>li{
					font-size: 0;
      	}
      }
      .seach_down_item{
				padding: 7px 16px;
				font-size: 13px;
				line-height: normal;
				background-color: #fff;
				cursor: pointer;
				overflow: hidden;
	      white-space: nowrap;
	      text-overflow:ellipsis;
        &.active{
          background-color: #02b0f0;
          color: #fff;
          &:hover{
            background-color: #02b0f0;
            color: #fff;
          }
        }
				&:hover{
					background-color: #f3f3f3;
				}
      }
      .seach_nodata{
      	text-align: center;
      	color: #999;
      	font-size: 13px;
      	padding: 5px 0;
      }
    }
	}
</style>
